<template>
  <div class="not_found">
    <img
      src="/src/assets/404.png"
      alt="404"
      title="找不到页面了" />
    <el-button
      class="not_found_button"
      round
      @click="backHome">
      返回首页
    </el-button>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";

/** 路由 */
const router = useRouter()
/** store */
const userStore = useUserStore()

const backHome = () => {
  if (userStore.token) {
    router.push("/home")
  } else {
    router.push("/login")
  }
}
</script>

<style lang="scss" scoped>
.not_found {
  width: 100vw;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;

  .not_found_button {
    width: 200px;
    height: 40px;
    background: #edd1fc;
    color: #ffffff;
    letter-spacing: 10px;
    font-size: 20px;
    font-weight: 800;

    :deep(span) {
      margin-left: 12px;
    }
  }
}
</style>